<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <link rel="stylesheet" href="bootstrap.min.css">
</head>
<style>
    table {
        margin-top: 50px;
    }
</style>

<body>
    <div class="container" style="margin-top:100px;">
        <div class="row">
            <div class="col-md-6">
                <input type="text" placeholder="请输入商品名字" name='addname'>
                <button type="button" class="add">新增</button>
            </div>
            <div class="col-md-6">
                <input type="text" placeholder="请输入查询的商品名字" name='queryname'>
                <button onclick="search();">查询</button>
            </div>

            <table class="table table-bordered">
                <thead>
                    <tr>
                        <td>商品id</td>
                        <td>商品名字</td>
                        <td>创建日期</td>
                        <td>操作</td>
                    </tr>
                </thead>
                <tbody>

                </tbody>
            </table>
        </div>
    </div>
    <script src='./jquery.min.js'></script>
    <script>
        /**
         * 搜索
         */
        function search() {
            var searchName = $("input[name=queryname]").val();
            $.ajax({
                url: "http://localhost:8989/searchProduct",
                type: "post",
                data: {
                    "name": searchName,
                },
                dataType: "json",
                success: function (data) {
                    //清空原来的商品列表
                    $('tbody').html("");
                    //重新添加
                    add(data);
                },
                error: function () {}
            })
        }

        // 页面加载的时候请求数据
        $.ajax({
            url: 'http://localhost:8989/getList',
            method: 'GET',
            dataType: 'json',
            success: function (res) {
                console.log(res);
                add(res.myProduct);
            }
        })

        /**
         * 删除操作
         */
        function deleteProduct(id) {
            $.ajax({
                url: "http://localhost:8989/deleteProduct",
                type: "post",
                data: {
                    "id": id,
                },
                dataType: "json",
                success: function (data) {
                    $("tr[trid=" + id + "]").hide(200);
                },
                error: function () {}
            })
        }

        $('.add').click(function () {
            if ($('input').eq(0) == '') {
                alert('请输入商品');
            } else {
                console.log('add');
                var name = $('input[name=addname]').val();
                $.ajax({
                    url: 'http://localhost:8989/addList',
                    type: 'POST',
                    data: {
                        "name": $('input').eq(0).val(),
                    },
                    dataType: 'json',
                    success: function (res) {
                        // 请求成功之后
                        // 首先加载出之前的数据
                        // 然后获取当前数据的长度，然后添加本条数据
                        console.log(res);
                        add(res);
                    }
                })
            }
        });

        function add(data) {
            for (var i in data) {
                $('tbody').append(
                    `<tr trid="${data[i].id}">
						<td>${data[i].id}</td>
						<td>${data[i].name}</td>
						<td>${data[i].time}</td>
						<td><a href="javascript: deleteProduct('${data[i].id}');">删除</a></td>
					</tr>`
                );
            }
        }
    </script>
</body>

</html>
